<template>
	<div class="statistics">
		<div class="tableBox">
			<div class="title">Lot No.记录本班次薄膜使用量</div>
			<el-form ref="form" label-position="left" :model="form" label-width="53%">
				<el-form-item label="计数者"><div><el-input v-model="form.num1" placeholder="请选择"></el-input></div></el-form-item>
				<el-form-item label="本班次合计薄膜使用量(卷)"><div><el-input v-model="form.num2" placeholder="请输入"></el-input></div></el-form-item>
			</el-form>
		</div>
		<div class="tableBox" style="margin-top:30px;">
			<el-table :data="tableData" max-height="660px">
				<el-table-column type="index" width="80">
					<template slot-scope="scope">
						<div @click="createRow" v-if="scope.$index == tableData.length - 1"><img src="@/assets/img/add.png" /></div>
						<div @click="delRow(scope.$index, scope.row)" v-else><img src="@/assets/img/plus.png" /></div>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="产品名" align="center" width="120" show-overflow-tooltip>
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.name" placeholder="请选择产品名"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column type="index" label="序号" align="center" width="80" show-overflow-tooltip></el-table-column>
				<el-table-column prop="time" label="批号" align="center" width="200" show-overflow-tooltip>
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.time" placeholder="请输入批号"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="errorName" label="使用前量" align="center" min-width="200">
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.errorName" placeholder="请选择类型"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="logName" label="使用后残量" align="center" min-width="200">
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.logName" placeholder="请选择类型"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="timelength" label="不良薄膜类型" align="center" min-width="200">
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.timelength" placeholder="请选择类型"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="iftype" label="判断" align="center" min-width="200">
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.iftype" placeholder="请选择"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="remarks" label="薄膜正确否" align="center" min-width="200">
					<template slot-scope="scope">
						<div><el-input v-model="scope.row.remarks" placeholder="请选择"></el-input></div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div style="float:right;margin-top:50px;"><el-button type="primary">确认</el-button></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					num1: '',
					num2: '',
				},
				tableData: [
					{
						id: '1',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: '',
						iftype:'',
						name:''
					},
					{
						id: '2',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: '',
						iftype:'',
						name:''
					},
					{
						id: '3',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: '',
						iftype:'',
						name:''
					},
					{
						id: '4',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: '',
						iftype:'',
						name:''
					},
					{
						id: '5',
						time: '',
						timelength: '',
						errorName: '',
						logName: '',
						remarks: '',
						iftype:'',
						name:''
					}
				],
			}
		},
		methods: {
			changeItem(id) {
				this.selectedIndex = id;
			},
			createRow() {
				var list = {
					id: '1',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				};
				this.tableData.push(list);
			},
			delRow(val, row) {
				this.tableData.splice(val, 1);
			},
			onSubmit() {
				console.log('submit!');
			}
		}
	}
</script>
<style lang="scss" scoped>
.statistics {
	.title {
		font-weight: 600;
		padding-top: 10px;
		color:#000;
	}
}
</style>
<style scoped>
.statistics{
	height: calc(100vh - 150px);
	overflow-y: auto;
}
.tableBox {
	border-radius: 10px;
	background:#fff;
	padding: 30px 30px;
	height:auto;
}
.statistics >>> .el-form-item{
	border-bottom:solid 1px #eeeeee;
	padding-bottom:5px;
}
.statistics >>> .el-form-item__label{
	font-size:24px;
	color:#000;
	line-height: 60px;
}
.statistics >>> .el-form-item__content{
	font-size:24px;
	color:#666666;
}
.statistics >>> .el-input > input{
	background:#fff;
	font-size:24px;
}
.statistics >>> .el-input--large .el-input__inner {
	padding-left: 30px !important;
}
</style>
